.<template>
  <!--查看明细-->
	<div id="app">
    <div class="checkidentity">
        <div class="withdraw-title">身份认证</div>
        <div class="checki-userinfo">
            <div class="checki-name">
                <span>姓名:</span>
                <input type="text" v-model="name" placeholder="请输入您的姓名">
            </div>
            <div class="checki-phone" style="border-bottom: none;">
                <span>联系电话:</span>
                <input type="tel" v-model="mobile" placeholder="请输入您的联系电话">
            </div>
        </div>
        <div class="backe"></div>
        <div class="getcord">
            <div class="check-add">
                <!--身份证面-->
                <div class="code-front">
                    <img v-if="cardfront" :src="qiniuUrl+cardfront" alt="">
                    <div v-if="!cardfront" style="position: relative;">
                        <span class="icon-add"></span>
                        <p style="position: absolute;left: 1rem;top: 1.9rem;">身份证正面</p>
                    </div>
                    <form id= "uploadForm1"  enctype="multipart/form-data">
                        <input type="file"  id="headImgUpload1" name="headImg" class="file">                         
                    </form>
                </div>
                <!--身份证反面-->
                <div class="code-reverse">
                    <img v-if="cardreverse" :src="qiniuUrl+cardreverse" alt="">
                    <div v-if="!cardreverse" style="position: relative;">
                        <span class="icon-add"></span>
                        <p style="position: absolute;left: 1rem;top: 1.9rem;">身份证背面</p>
                    </div>
                    <form id= "uploadForm2"  enctype="multipart/form-data">
                        <input type="file"  id="headImgUpload2" name="headImg" class="file">                         
                    </form>                    
                </div>
            </div>
        </div>
        <div class="handcord">
            <!--照片-->
            <div class="handcord-img">
                <img v-if="cardhand" :src="qiniuUrl+cardhand" alt="">
                <div v-if="!cardhand">
                    <img class="img-icon" src="../../../assets/img/icon5.png" alt="">
                    <p style="color: #bbb;margin-top: .1rem;">手持身份证照片</p>
                </div>
                <form id= "uploadForm3"  enctype="multipart/form-data">
                    <input type="file"  id="headImgUpload3" name="headImg" class="file">                         
                </form>                  
            </div>
        </div>
        <div class="my-btn" style="bottom:.3rem;" @click="getSave" v-text="text">提交</div>
    </div>
	</div>
</template>
<script>
    import 'assets/css/common.css'
    import './index.css'
    import common from 'assets/js/common'
    export default{
        data:function(){
            return{
                mobile:'',
                name:'',
                cardfront:'',//正面
                cardreverse:'',//反面
                cardhand:'',//手持页面
                text:'完成',
                token:'',
                qiniuUrl:'http://oj8zwflmq.bkt.clouddn.com/'
            }
        },
        mounted:function(){
            //初始数据
            this.text = '完成';
            this.mobile = '';
            this.name = '';
            this.cardfront = '';
            this.cardreverse = '';
            this.cardhand = '';
            $("#headImgUpload1").change((e)=>{
                this.updateHead(e,1); 
            });
            $("#headImgUpload2").change((e)=>{
                this.updateHead(e,2); 
            });
            $("#headImgUpload3").change((e)=>{
                this.updateHead(e,3); 
            });
        },
        methods:{
            updateHead(e,num){
                let file = e.target.files[0];
                let d = new Date();
                let type = file.name.split('.');
                let param = new FormData(); //创建form对象
                //param.append('chunk','0');//断点传输
                //param.append('chunks','1');
                param.append('file',file,file.name);
                param.append('key',common.getUUId());
                console.log(param); //FormData私有类对象，访问不到，可以通过get判断值是否传进去
                let config = {
                    'Authorization':localStorage.token,
                    'Platform':localStorage.platform,
                    'Content-Type':'multipart/form-data'
                };
               //先从自己的服务端拿到token
                common.ajax({
                   type:'GET',
                   url:'api/qiniutoken'
                }).then(respose=>{
                    param.append('token',respose.token);
                    this.upload(param,config,file.name,num);//然后将参数上传七牛
                    return;
                })
            },
            //传到七牛
            upload(param,config,pathName,num){
                console.log(param);
                $.ajax({
                    type: 'post',
                    url: "http://upload-z0.qiniu.com",
                    data: param,
                    headers:config,
                    success:function(response){

                        if(num == 1){
                            this.cardfront = response.data.key;
                        }
                        if(num == 2){
                            this.cardreverse = response.data.key;                        
                        }
                        if(num == 3){
                            this.cardhand = response.data.key;  
                        }                    
                    }
                    //fail:function(){}
                })
                // .then(response=>{
                // }).catch(error=>{
                //     Toast({
                //         message: "网络错误,请稍后再试",
                //         duration: 2000,
                //         position: 'bottom',
                //         //iconClass: 'icon icon-success'
                //     });
                // })


                // common.ajax({
                //     type:'POST',
                //     url:"http://upload-z0.qiniu.com",
                //     data:param,
                //     headers:{'Content-Type':'multipart/form-data'}
                // }).then(response=>{
                //     if(num == 1){
                //         this.cardfront = response.data.key;
                //     }
                //     if(num == 2){
                //         this.cardreverse = response.data.key;                        
                //     }
                //     if(num == 3){
                //         this.cardhand = response.data.key;  
                //     }
                // })
            },
            //保存
            getSave(){
                if(!this.name || this.name == '' || !this.mobile){
                    common.errMessage('请填写完信息再保存');
                }else if(!this.cardfront || !this.cardreverse || !this.cardhand){
                    common.errMessage('请上传三张对应的身份证照片');
                }else if(this.text != '请求中...'){   
                    this.text = '请求中...';  
                    common.ajax({
                        type:'POST',
                        url:'api/adder/adderqualification',
                        data:{
                            username : this.name,
                            mobile : this.mobile,
                            idcard_z : this.cardfront,
                            idcard_f : this.cardreverse,
                            idcard : this.cardhand
                        }
                    }).then(response=>{
                        common.errMessage('已经收到您的审核资料，我们将会快马加鞭完成您资料的审核');
                        window.location.href = '/views/wallet/index.html?h5=true';
                    }).catch(response=>{
                         this.text = '完成'; 
                    })
                }else{
                    return
                }
            }
        }
    }
</script>

<style>

</style>
